<template>
  <div class="app-container">
    <template>
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="searchObj.name" placeholder="讲师"/>
        </el-form-item>
        <el-form-item>
          <el-select v-model="searchObj.level" placeholder="头衔">
            <el-option label="高级讲师" value="1"/>
            <el-option label="首席讲师" value="2"/>
          </el-select>
        </el-form-item>
        <el-form-item label="入驻时间">
          <el-date-picker
            v-model="searchObj.joinDateBegin"
            label="入驻时间"
            type="date"
            placeholder="选择日期"/>
          --
          <el-date-picker
            v-model="searchObj.joinDateEnd"
            type="date"
            placeholder="选择日期"/>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="queryCondition">查询</el-button>
          <el-button type="primary" @click="clear">清空</el-button>
        </el-form-item>
      </el-form>
      <div style="padding:20px;"/>
      <el-table
        :data="teachers"
        style="width: 100%">
        <el-table-column
          type="index"
          width="50">
          <template slot-scope="scope">
            {{ (pageNum-1)*pageSize + 1 + scope.$index }}
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="180"/>
        <el-table-column
          prop="career"
          show-overflow-tooltip
          label="资历"/>
        <el-table-column
          prop="level"
          width="140"
          label="头衔">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.level === 1 ? 'primary' : 'success'"
              disable-transitions>{{ scope.row.level ===1 ?'高级讲师':'首席讲师' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="sort"
          width="100"
          label="排序"/>
        <el-table-column
          prop="joinDate"
          width="180"
          label="入驻时间"/>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table-column></el-table>
    </template>
    <div style="text-align:center;margin-top:180px">
      <el-pagination
        :current-page="pageNum"
        :page-sizes="[1, 2, 3, 4, 5]"
        :page-size="pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
    </div>
  </div>

</template>

<script>
// js脚本
import teacherApi from '@/api/teacher' // 引入外部封装的CRUD方法
export default {
  data() {
    return {
      searchObj: {},
      teachers: [],
      pageNum: 1,
      pageSize: 3,
      total: 0
    }
  },

  created() {
    // this.getTeacherList()
    this.getPage()
  },

  methods: {
    // 根据查询条件查询
    queryCondition() {
      this.getPage()
    },
    // 清空查询条件
    clear() {
      this.searchObj = {}
      this.pageNum = 1
      this.pageSize = 3
      this.getPage()
    },
    // 根据导航每页显示条数查询
    handleSizeChange(size) {
      this.pageSize = size
      this.getPage()
    },
    // 根据页面变动查询
    handleCurrentChange(num) {
      this.pageNum = num
      this.getPage()
    },
    // 分页查询
    getPage() {
      teacherApi.page(this.pageNum, this.pageSize, this.searchObj).then(r => {
        this.teachers = r.data.page.records
        this.total = r.data.page.total
      })
    },
    getTeacherList() {
      teacherApi.list().then(r => {
        this.teachers = r.data.items
      })
    },
    // 编辑方法   携带id跳转到更新表单页面 router/index.js 创建跳转到编辑页面的路由(teacher的子路由)
    handleEdit(index, teacher) {
      console.log(teacher)
      // teacherApi.getTeacherById(teacher.id).then(r => {
      // 跳转至更新表单
      // this.teacher = r.data.item
      // this.$router.push('/teacher/edit?id=' + teacher.id)
      // 传参的两种方式  路径拼接  teacher?id
      this.$router.push('/teacher/edit/' + teacher.id)
      // })
    },
    // 删除方法
    handleDelete(index, teacher) {
      console.log(teacher)
      teacherApi.del(teacher.id).then(r => {
        this.$message.success('删除成功')
        // 刷新页面
        this.getTeacherList()
      })
    }
  }
}
</script>

